<template>
	<view class="login">
		<!-- 背景 -->
		<view class="login-bg"></view>
		<!-- 主体部分 -->
		<view class="login-box">
			<!-- logo -->
			<image class="login-logo" src="../../static/uni.png" mode="widthFix"></image>

			<!-- 标题 -->
			<view class="login-title">
				<u-tabs
					:list="tabList"
					lineWidth="30px"
					lineHeight="6"
					:activeStyle="{ color: '#000' }"
					:inactiveStyle="{ color: '#949494' }"
					@click="tabClick"
				></u-tabs>
			</view>

			<!-- 账号密码 -->
			<view class="login-form">
				<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="form">
					<u-form-item v-if="activeIndex === 0" prop="account" borderBottom ref="item">
						<u--input
							v-model="userInfo.account"
							border="bottom"
							placeholder="请输入账号"
							prefixIcon="man-add"
							prefixIconStyle="font-size: 22px;color: #909399"
							clearable
						></u--input>
					</u-form-item>

					<u-form-item v-if="activeIndex === 0" prop="password" borderBottom ref="item">
						<u--input
							v-model="userInfo.password"
							border="bottom"
							placeholder="请输入密码"
							prefixIcon="lock"
							prefixIconStyle="font-size: 22px;color: #909399;"
							:password="!isShowPwd"
							clearable
						>
							<!-- <template slot="suffix">
								<i
									v-if="userInfo.password"
									style="font-size: 20px;color: #909399;"
									:class="{ iconfont: true, 'icon-open': isShowPwd, 'icon-close': !isShowPwd }"
									@click="
										() => {
											isShowPwd = !isShowPwd;
										}
									"
								></i>
							</template> -->
						</u--input>
					</u-form-item>

					<u-form-item v-if="activeIndex === 1" prop="tel" borderBottom ref="item">
						<u--input
							v-model="userInfo.tel"
							border="bottom"
							placeholder="请输入手机号"
							prefixIcon="phone"
							prefixIconStyle="font-size: 22px;color: #909399"
							clearable
						></u--input>
					</u-form-item>

					<u-form-item v-if="activeIndex === 1" prop="code" borderBottom ref="item">
						<u--input
							v-model="userInfo.code"
							border="bottom"
							placeholder="请输入验证码"
							maxlength="4"
							prefixIcon="lock"
							prefixIconStyle="font-size: 22px;color: #909399;"
							:password="!isShowPwd"
							clearable
						>
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="20" changeText="60秒"></u-code>
								<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
							</template>
						</u--input>
					</u-form-item>
				</u--form>
			</view>

			<!-- 登录 -->
			<u-button type="primary" class="login-btn" @click="loginBtn">登录</u-button>

			<!-- 其他登录方式 -->
			<view class="login-other" v-if="false">
				<text>——其他方式登录——</text>
				<view class="login-other-list">
					<uni-icons type="qq" size="25"></uni-icons>
					<uni-icons type="weixin" size="25"></uni-icons>
					<uni-icons type="weibo" size="25"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { isMobile } from '@/utils/rules.js';

export default {
	data() {
		return {
			isShowPwd: false,
			userInfo: {
				account: '',
				password: ''
			},
			rules: {
				account: {
					type: 'string',
					max: 10,
					required: true,
					message: '用户名不正确',
					trigger: ['blur', 'change']
				},
				password: {
					type: 'string',
					max: 10,
					required: true,
					message: '密码不能为空',
					trigger: ['blur', 'change']
				},
				tel: {
					validator: (rule, value, callback) => {
						return isMobile(value);
					},
					max: 11,
					message: '手机号不正确',
					trigger: ['blur', 'change']
				},
				code: {
					type: 'string',
					max: 4,
					required: true,
					message: '验证码有误',
					trigger: ['blur', 'change']
				}
			},
			activeIndex: 0,
			tabList: [
				{
					name: '账号登录'
				},
				{
					name: '手机登录'
				}
			],
			tips: '',
			time: 60
		};
	},

	// 页面展示就监听
	onShow() {},
	// 监听页面加载
	onLoad() {},
	// 兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
	onReady() {
		this.$refs.form.setRules(this.rules);
	},

	methods: {
		loginBtn() {
			this.$refs.form
				.validate()
				.then(res => {
					this.$api
						.login({ name: 'Hello Kitty', status: 'sold' })
						.then(res => {
							uni.setStorageSync('token', '123466');
							let timer = setTimeout(() => {
								clearTimeout(timer);
								uni.switchTab({
									url: '/pages/home/home'
								});
							}, 600);
							uni.showToast({
								title: '登录成功',
								duration: 2000
							});
							console.log('res: ', res);
						})
						.catch(err => {
							this.$u.toast('登录失败');
						});
				})
				.catch(errors => {
					console.log('校验失败');
				});
		},

		tabClick(item) {
			this.activeIndex = item.index;
			this.$refs.form.clearValidate();
			this.$refs.form.resetFields();
		},

		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				});
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.login {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	overflow: hidden;
	// background: $background-base64-code no-repeat center;
	// background-size: cover;
	z-index: 99;

	.login-bg {
		position: absolute;
		top: 0;
		width: 100%;
		height: 250px;
		overflow: hidden;
		z-index: -1;
	}
	.login-bg:after {
		/* 这个伪类的作用就是一个圆弧的背景色 */
		position: absolute;
		content: '';
		top: 0;
		z-index: -1;
		width: 140%;
		height: 250px;
		left: -20%;
		border-radius: 0 0 50% 50%;
		/*分别对应 左上 右上 右下 左下 可以修改成其它颜色*/
		background: linear-gradient(160deg, #1496f1, #79dcfa);
	}

	.login-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 90%;
		height: 65%;
		background-color: #fff;
		border-radius: 20px;
		box-shadow: 0px 0px 5px #89a4af;

		.login-logo {
			width: 80px;
			padding: 30px 0;
		}

		.login-form {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 35%;
			padding-bottom: 15px;
			/deep/ .u-input__content {
				width: 260px;
				padding: 10px 0;
			}
			/deep/ .u-line {
				border: none !important;
			}
		}

		.login-btn {
			width: 200px !important;
		}

		// 其他登录方式
		.login-other {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 25px;
			color: #909399;
			.login-other-list {
				display: flex;
				justify-content: space-evenly;
				width: 100%;
				margin-top: 8px;
			}
		}
	}
}
</style>
